<template>
  <div>
    <div v-show="!showEdit&&!showDetail">
      <search-form
        :search-config="searchConfig"
        :label-width="150"
        @clear="clearSearch"
        @search="handleSearch"
      />
      <table-box
        ref="refTable"
        table-size="mini"
        :table-config="tableConfig"
        show-selection
        dragable
        :selected-arry.sync="tableSelected"
        :other-filters="otherFilters"
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      />
    </div>
    <div>
      <import-files v-if="importVisible" title="导入" :visible.sync="importVisible" :config="fileImportConfig" @success="refreshTable" />
      <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" />
    </div>
    <edit-form v-if="showEdit" :id="activeDataId" :page-show.sync="showEdit" @success="refreshTable" />
    <detail-page v-if="showDetail" :id="activeDataId" :page-show.sync="showDetail" />
  </div>
</template>
<script>
import editForm from './editForm.vue'
import detailPage from './detail.vue'
export default {
  name: 'StoreAddEva',
  components: { editForm, detailPage },
  data() {
    return {
      exportVisible: false,
      importVisible: false,
      tableSelected: [],
      // otherFilters: [],
      otherFilters: [{ 'id': 'isEnd', 'property': 'isEnd', 'operator': '=', 'value': '0' }],
      activeDataId: '',
      showEdit: false,
      showDetail: false,
      searchConfig: [
        { label: '门店', prop: 'shopCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' }
          },
          dialogConfig: {
            title: '门店',
            interfacePath: '/select-service/api/v1/shop/page',
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        {
          type: 'select',
          prop: 'customerBizState',
          label: '门店状态',
          filter: true,
          config: {
            filterable: false,
            remoteUrl: '/data-dict/api/v2/dictionary/SHOP_BIZ_STATE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '客户', prop: 'customerCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' },
            apiHeader: {
              'permission-code': 'storeupgrade',
              'Permission-App': 'slm'
            }

          },
          dialogConfig: {
            title: '客户',
            interfacePath: '/select-service/api/v1/customer/page',
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        {
          type: 'select',
          prop: 'actualProcessResult',
          label: '处理结果',
          filter: true,
          config: {
            filterable: false,
            remoteUrl: '/data-dict/api/v2/dictionary/ACTUAL_PROCESS_RESULT?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },

        { label: '要求整改时间', prop: 'claimTime', type: 'date', placeholder: '', filter: true },

        { label: '门店建设项目号', prop: 'constCode', type: 'text', placeholder: '', filter: true },
        {
          type: 'select',
          prop: 'constSchedule',
          label: '门店建设进度',
          filter: true,
          config: {
            filterable: false,
            remoteUrl: '/data-dict/api/v2/dictionary/BEFORE_CONST_SCHEDULE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '办事处', prop: 'officeCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' }
          },
          dialogConfig: {
            title: '办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        {
          type: 'select',
          prop: 'sponsorType',
          label: '发起人类型',
          filter: true,
          config: {
            filterable: false,
            remoteUrl: '/data-dict/api/v2/dictionary/SPONSOR_TYPE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'isNotice',
          label: '是否下发整改通知',
          config: {
            selectData: [
              { label: '是', value: '1' },
              { label: '否', value: '0' }
            ] }
        },
        {
          label: '店面整改是否完成',
          prop: 'isEnd',
          type: 'radio',
          value: '0',
          placeholder: '',
          config: {
            selectData: [
              { label: '全部', value: '' },
              { label: '否', value: '0' },
              { label: '是', value: '1' }
            ]
          }
        }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopUpgrade/page`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        sort: 'createTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: '140'
          },
          {
            prop: 'rectifyCode',
            label: '门店升级改造编号',
            minWidth: '150',
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'actualProcessResult',
            label: '处理结果',
            type: 'select',
            // render: function(createElement, rows) {
            //   if (!rows.actualProcessResult || rows.actualProcessResult === 'NONE') {
            //     return (<div>
            //       <div>
            //         {''}</div>
            //     </div>
            //     )
            //   }
            //   return ''
            // },
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'ACTUAL_PROCESS_RESULT'
            },
            minWidth: '100'
          },
          {
            prop: 'claimTime',
            label: '要求整改时间',
            minWidth: '140',
            type: 'date'
          },
          {
            prop: 'officeName',
            label: '办事处',
            minWidth: '120'
          },
          {
            prop: 'customerName',
            label: '客户',
            minWidth: '120'
          },
          {
            prop: 'shopName',
            label: '门店',
            minWidth: '120'
          },
          {
            prop: 'sponsorType',
            label: '发起人类型',
            type: 'select',
            minWidth: '110',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SPONSOR_TYPE'
            }
          },
          {
            prop: 'isNotice',
            label: '是否下发整改通知',
            minWidth: '145',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'constCode',
            label: '门店建设项目号',
            minWidth: '160'
          },
          {
            prop: 'constSchedule',
            label: '门店建设进度',
            minWidth: '130',
            type: 'select',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BEFORE_CONST_SCHEDULE'
            }
          },
          {
            prop: 'isEnd',
            label: '门店整改是否完成',
            minWidth: '145',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'followFeedback',
            label: '跟进情况反馈',
            minWidth: '130'
          }
        ],
        btnList: this.isProduction ? null : [{
          buttonName: '新增',
          outerFlag: true,
          optCode: 'add'
        },
        {
          buttonName: '编辑',
          outerFlag: true,
          optCode: 'edit'
        },
        {
          buttonName: '导入',
          outerFlag: true,
          optCode: 'import'
        },
        {
          buttonName: '导出',
          outerFlag: true,
          optCode: 'export'
        }
        ]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '门店升级改造',
        dataApi: '/slm-admin/api/v1/shopUpgrade/export?type=0',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      },
      {
        code: 'exportTemplate',
        name: '门店升级改造模板',
        async: false,
        templateMethod: 'post',
        templateApi: '/slm-admin/api/v1/shopUpgrade/export?type=1'
      }]
    },
    fileImportConfig() {
      return [{
        code: 'importNew',
        name: '新增门店升级改造',
        async: false,
        apiUrl: '/slm-admin/api/v1/shopUpgrade/importExcel?type=1'
      },
      {
        code: 'importUpdate',
        name: '修改门店升级改造',
        async: false,
        apiUrl: '/slm-admin/api/v1/shopUpgrade/importExcel?type=0'
      }]
    }
  },
  async  created() {
  },
  methods: {
    // 清空搜索数据
    clearSearch() {
    },
    // 设置表格多选行高亮
    tableRowClassName({ row, rowIndex }) {
      const filterArr = this.tableSelected.filter(item => item.id === row.id)
      return filterArr.length > 0 ? 'selected-highlight' : ''
    },
    refreshTable(flag) {
      this.$refs.refTable.initTableData(!!flag)
    },
    // 获取搜索条件
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData()
      })
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'import':
          this.handleImport()
          break
        case 'export':
          this.handleExport()
          break

        default:
          break
      }
    },
    // 新增/编辑
    handleEdit(data) {
      if (data && data.id) {
        this.activeDataId = data.id
      } else this.activeDataId = ''
      this.showEdit = true
    },
    handleDetail(data) {
      if (data && data.id) {
        this.showDetail = true
        this.activeDataId = data.id
      }
    },
    // 导出
    handleExport() {
      this.exportVisible = true
      // const querys = this.$refs.refTable.getAllFilters()
      // const searchFilters = (querys && querys.searchBarFilter) || []
      // this.exportData.filtersRaw = [...this.otherFilters, ...searchFilters]
      // this.visible = true
    },
    // 导入
    handleImport() {
      this.importVisible = true
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    }
  }
}
</script>
